import React from 'react';
import { Button,Layout,Menu,Table,Input,Collapse} from 'element-react';
import { NavLink} from 'react-router-dom';
import {userLogin,changeUseName} from '../action/login'; 
import mapStateToProps from '../value/mapStateToProps';
import {connect} from 'react-redux';
 class User extends React.Component{
    constructor(props) {
        super(props);

        this.state = {
          columns: [],
          page:{
            num:1
          },
          data:{
            data:[1]
          } 
        }
      }

    getCommt(a){
       a={...a, name:this.props.user.name}
      $.ajax({
        type:"post",
        url:'http://10.31.160.25:3000/comment/list',
        data:{
          ...a
        }
      }).then(res=>{
        this.setState({
          data: Object.assign({},this.state.data, {data:res.rows}),
        })
      })
    } 
    handl(e){
        var that=this;
        var ele=document.getElementsByClassName('pagination')[0].childNodes;
        var length=ele.length;
        for(var i=0;i<length;i++){
            ele[i].className=''
        };
        e.target.parentNode.className='active';
    that.setState({ 
        page:Object.assign({},that.state.page,{num:e.target.getAttribute('value')})
    });
    this.getCommt({page:e.target.getAttribute('value')})
    }
    componentWillMount(){
      console.log('mount');
      this.getCommt({page:1});
  }
  componentWillUpdate(){
    console.log('update')
  }
    componentDidUpdate(){
    }
    render(){
        var output=[];
        var list = []; 
         for(let i=0;i<this.state.data.data.length;i++){
            list.unshift(
                <div  className="col-sm-6 " style={{width:"100%"}}>
                    <div className="thumbnail">
                    <div className="caption">
                        <p>产品： {this.state.data.data[i].title}</p>
                        <h3 >{this.state.data.data[i].desc}</h3>
                    </div>
                    </div>
                </div>
            )
        }
        $.ajax({
            type:'get',
            url:`http://10.31.160.25:3000/users/data/${this.props.user.id}`,
            async:false
        }).then(res=>{
            console.log(res)
            output.push(
                    <tbody>
                        <tr>
                            <td style={{width:270+'px'}}>用户名：</td>
                        <td>
                                {res.name }
                            </td>
                        </tr>
                        <tr>
                            <td style={{width:270+'px'}}>购买数量：</td>
                        <td>
                                {res.interest.length }
                            </td>
                        </tr>
                        <tr>
                            <td style={{width:270+'px'}}>手机号：</td>
                        <td>
                                {res.phonenum }
                            </td>
                        </tr> 
                    </tbody>
                    )
                    console.log(output)
            })
       var style={
        goodsList:{
            marginTop:"20px"
        }
    }
        return(
            <div className="container">
                 <Layout.Row gutter="12" className="tac" >
                 <Layout.Col  md="4" lg="4">
                    <div className="grid-content bg-purple" >
                        <Layout.Col>
                        <Menu defaultActive="2" className="el-menu-vertical-demo" onOpen={this.onOpen.bind(this)} onClose={this.onClose.bind(this)}>
                        <Menu.SubMenu index="1" title={<span><i className="el-icon-message"></i>用户相关</span>}>
                          <Menu.ItemGroup title="用户">
                            <Menu.Item index="1-1" >头像</Menu.Item>
                            <Menu.Item index="1-2" >访客留言</Menu.Item>
                          </Menu.ItemGroup>
                        </Menu.SubMenu>
                        <Menu.Item index="2"><i className="el-icon-menu"></i>人气用户</Menu.Item>
                        </Menu>
                        </Layout.Col>
                    </div>
                </Layout.Col>
                <Layout.Col md="4" lg="14">
                    <div className="grid-content bg-purple-light" style={{width:'820px'}}>
                    {/* <Input placeholder="请输入内容" style={{display:'inline-block',width:'730px',margin:'0 5px 20px 0'}} /><Button type="primary" icon="search">搜索</Button> */}

                     <img className="img-circle" src="./img/user.jpg" style={{width:"120px",height:"120px",float:"left"}} alt="头像" title="用户头像"/> 
                    <br/>

                    <div style={{marginLeft:"140px"}}>
                        用户名：{this.props.user.name}
                        <div style={{float:"right"}}>
                          <p className="btn btn-default" type="button"><NavLink to='/cart'>我的购物车</NavLink></p>
      

                        </div>

                        <p>用户等级：<b className="text-info" title="Lv2">Lv2</b></p>
                        <div className="progress progress-striped" title="还差70才能升级哦">
                          <div className="bar" style={{width: "30%",height:"100%",backgroundColor:"#0e90d2",textShadow:"0 -1px 0 rgba(0,0,0,0.25)"}}><b style={{float:"right",color:"white"}}>30 / 100</b></div>
                        </div>
                      </div>

                      <div style={{height:"30px",width:"100%"}}></div>

                      <div className="tabbable">
                        <ul className="nav nav-tabs">
                          <li className="active"><a href="#tab1" data-toggle="tab">我的信息</a></li>
                          <li><a href="#tab2" data-toggle="tab">我的评论</a></li>
                          
                        </ul>
                        <div className="tab-content">
                          <div className="tab-pane active" id="tab1">
                            <div className="table-responsive m-t">
                            <h4>详细信息</h4>
                                <table className="table invoice-table" style={style.goodsList}>
                             
                                        {output}
                                   
                                </table>
                            </div>
                          </div>
                          <div className="tab-pane" id="tab2">
                            <h4>评论列表</h4>
                            {list }
                            <nav aria-label="..." className="text-center" onClick={this.handl.bind(this)}>
                                <ul className="pagination" >
                                    <li className="disabled">
                                        <span>
                                        <span aria-hidden="true">&laquo;</span>
                                        </span>
                                    </li>
                                    <li>
                                    <span  value='1'>1 <span className="sr-only">(current)</span></span>
                                    </li>
                                    <li>
                                    <span value='2'>2<span className="sr-only">(current)</span></span>
                                    </li><li>
                                    <span value='3'>3 <span className="sr-only">(current)</span></span>
                                    </li><li>
                                    <span value='4'>4 <span className="sr-only">(current)</span></span>
                                    </li><li>
                                    <span value='5'>5 <span className="sr-only">(current)</span></span>
                                    </li><li>
                                    <span value='6'>6 <span className="sr-only">(current)</span></span>
                                    </li>
                                    <li className="disabled">
                                        <span>
                                        <span aria-hidden="true">&raquo;</span>
                                        </span>
                                    </li>
                                </ul>
                            </nav>
                          </div>
                          
                        </div>
                      </div>
                     
                    </div>
                </Layout.Col>             
                </Layout.Row>
            </div>
        )
    } 
    onOpen() {

    }
    
    onClose() {
    
    }
}
export default connect(mapStateToProps,{userLogin,changeUseName})(User);
